<template>
	<!-- 错题本 -->
	<view class="u-wrap">
		<u-navbar title="错题本" title-color="#fff" :background="background"
		back-icon-color="#ffffff" :back-text-style="{color: '#fff'}">
			<view class="slot-wrap">
				<!-- <u-icon name="list-dot" color="#ffffff" size="36" @click="changeModel"></u-icon> -->
			</view>
		</u-navbar>
		<u-search class="searchBar" placeholder="搜索考试" v-model="keyword" :clearabled="true" @search="searchFunc"
			@custom="searchFunc" :show-action="true"></u-search>
		<!-- 下拉选项栏 -->
		<u-dropdown :close-on-click-mask="mask" ref="uDropdown" :activeColor="activeColor">
			<u-dropdown-item @change="change" v-model="orderValue" title="排序" :options="options1"></u-dropdown-item>
			<u-dropdown-item title="筛选">
				<view class="slot-content">
					<view>题型</view>
					<view class="item-box">
						<view class="item" :class="[item.active ? 'active' : '']" @tap="queTagClick(index)"
							v-for="(item, index) in queTypelist" :key="index">
							{{item.label}}
						</view>
					</view>
				</view>
				<view class="slot-content">
					<view>难度</view>
					<view class="item-box">
						<view class="item" :class="[item.active ? 'active' : '']" @tap="diffTagClick(index)"
							v-for="(item, index) in diffList" :key="index">
							{{item.label}}
						</view>
					</view>
				</view>
				<u-button type="primary" @click="closeDropdown">确定</u-button>
			</u-dropdown-item>
		</u-dropdown>

		<view class="statistics">
			<view class="">
				<text class="firstT">{{testType}}</text>共有<text>{{faultDataList.length}}</text>道错题</text>
			</view>
			<!-- <u-button></u-button> -->
			<u-button type="default" size="mini" @click="errorPrac">错题练习</u-button>
		</view>

		<exam-fault v-for="(item,index) in faultDataList" :key="index" :faultItem="item"></exam-fault>
		<u-loadmore :status="status" />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				testType: "错题本",
				easyDeg: "包含全部",
				faultDataList: [],
				orderValue: '', // 记录下拉栏中的排序
				mask: true,
				activeColor: '#2979ff',
				queTypeSelected: '',
				diffSelected: '',
				background: {
					'background-image': 'linear-gradient(45deg, #007fd1, #013cd2)'
				},
				options1: [{
						label: '时间从近及远（默认）',
						value: 1,
					},
					{
						label: '时间从远及近',
						value: 2,
					},
					{
						label: '错误次数最多',
						value: 3,
					},
					{
						label: '错误次数最少',
						value: 4,
					}
				],
				queTypelist: [{
						label: '全部',
						value: '',
						active: true,
					},
					{
						label: '单选题',
						value: 1,
						active: false,
					},
					{
						label: '多选题',
						value: 2,
						active: false,
					},
					{
						label: '判断题',
						value: 3,
						active: false,
					},
					{
						label: '填空题',
						value: 4,
						active: false,
					},
					{
						label: '简答题',
						value: 5,
						active: false,
					}
				],
				diffList: [{
						label: '全部',
						value: '',
						active: true,
					},
					{
						label: '简单',
						value: 1,
						active: false,
					},
					{
						label: '中等',
						value: 2,
						active: false,
					},
					{
						label: '困难',
						value: 3,
						active: false,
					}
				],
				status: 'loadmore',
				page: 1,
			}
		},
		methods: {
			searchFunc(keyword) {
				console.log(keyword);
				var that = this
				this.$api.getErrorList(1, keyword)
					.then(res => {
						uni.showToast({
							title: '搜索成功'
						})
						console.log(res);
						that.faultDataList = res.values.records
					})
			},

			// 下拉栏所需函数
			change(index) {
				// this.$u.toast(`点击了第${index}项`);
				this.$u.toast(`筛选成功`);
				var that = this
				// console.log('orderValue',this.orderValue);
				switch (index) {
					case 1:
						// 按照时间降序排列
						that.faultDataList.sort(function(a, b) {
							return b.createTime < a.createTime ? -1 : 1
						})
						break
					case 2:
						// 按照时间升序排列
						that.faultDataList.sort(function(a, b) {
							return b.createTime < a.createTime ? 1 : -1
						})
						break
					case 3:
						// 按照得分从高到低
						that.faultDataList.sort(function(a, b) {
							return b.errorCount < a.errorCount ? -1 : 1
						})
						break
					case 4:
						// 按照得分从低到高
						that.faultDataList.sort(function(a, b) {
							return b.errorCount < a.errorCount ? 1 : -1
						})
						break
				}
			},
			// 点击下拉栏的确定
			closeDropdown() {
				var that = this
				this.$refs.uDropdown.close();
				// for(let item of this.queTypelist){
				// 	item.active = false
				// }
				this.$api.getErrorList(1, '', this.queTypeSelected, this.diffSelected)
					.then(res => {
						uni.showToast({
							title: '筛选成功'
						})
						console.log(res);
						that.faultDataList = res.values.records
					})
			},
			queTagClick(index) {
				// this.list[index].active = !this.list[index].active;
				// 单选，首先清除所有的激活状态
				for (let item of this.queTypelist) {
					item.active = false
				}
				this.queTypelist[index].active = true;
				this.queTypeSelected = this.queTypelist[index].value
			},
			diffTagClick(index) {
				// this.diffList[index].active = !this.list[index].active;
				// ...this.diffList.active = false
				for (let item of this.diffList) {
					item.active = false
				}
				this.diffList[index].active = true;
				this.diffSelected = this.diffList[index].value
			},
			errorPrac() {
				this.$u.route('/pages/exam/pracBankPage', {
					template: this.queTypeSelected,
					queDifficulty: this.diffSelected,
					examType: 'error',
				})
			}

		},
		onLoad() {
			this.$api.getErrorList(1, '', this.queTypeSelected, this.diffSelected)
				.then(res => {
					console.log(res);
					this.faultDataList = res.values.records
				})
			// this.$api.getErrorDetail(this.$store.state.access_token)
			// .then(res=>{
			// 	// console.log(res.values.questions);
			// 	this.faultDataList = res.values.questions
			// })
		},
		onReachBottom() {
			if (this.status === 'loadmore') {
				this.page += 1
				this.status = 'loading'
				this.$api.getErrorList(this.page, this.keyword, this.queTypeSelected, this.diffSelected)
					.then(res => {
						if (res.values.records.length === 0) {
							this.status = 'nomore'
						} else {
							this.faultDataList = this.faultDataList.concat(res.values.records)
							this.status = 'loadmore'
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	.searchBar {
		padding: 20upx;
	}

	.statistics {
		position: relative;
		margin: 20rpx 0 40rpx 0;
		font-size: 30upx;
		letter-spacing: 0.1em;
		display: flex;
		justify-content: space-between;

		.firstT {
			color: #304451;
			font-size: 36rpx;
			font-weight: bold;
			border-right: solid #304451 3px;
			padding: 0 20rpx;
			margin-right: 20rpx;
		}

		text {
			color: #0080d1
		}
	}

	.falseTable {
		position: absolute;

		.utrh {
			height: 90rpx;
		}

		.utr {
			height: 80rpx;

			.textCont {
				width: 50%;
				overflow: auto;
			}
		}

		.detailBtn {
			height: 60rpx;
		}
	}

	.slot-content {
		background-color: #FFFFFF;
		padding: 24rpx;

		.item-box {
			margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				border: 1px solid $u-type-primary;
				color: $u-type-primary;
				padding: 8rpx 40rpx;
				border-radius: 100rpx;
				margin-top: 30rpx;
			}

			.active {
				color: #FFFFFF;
				background-color: #2979ff;
			}
		}
	}
</style>
